import './TeacherVideoItem.scss'
import { Dropdown, Space, message } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';
import { deleteVideoAPI } from '@/apis/teacher';



export default function TeacherVideoItem({ info, onCheck, ifChecked, showChangeModal }) {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);


    const items = [
        {
            label: '删除',
            key: '0',
        },
        {
            label: '重命名',
            key: '1',
        },
    ];

    const handleMenuClick = function (e) {
        const eventArr = [
            async () => {
                const res = await deleteVideoAPI([{
                    class_id: user_status.class_id,
                    video_id: info.video_id
                }], user_status.token);

                console.log(res);
                if (res.data[0].success) {
                    message.success(res.data[0].message);
                    window.location.reload();
                } else {
                    message.error(res.data[0].message);
                }
            },
            () => {
                showChangeModal(info.video_id);
            }
        ]

        eventArr[e.key]();
    }


    const MenuProps = {
        items,
        onClick: handleMenuClick
    }

    function handleCheck() {
        onCheck(info.id);
    }

    const toVideoPlay = () => {
        dispatch(setUserStatus({
            ...user_status,
            video_url: info.video_url
        }))

        navigate('/teachervideo');
    }

    return (
        <div className="TeacherVideoItem" >
            <input
                type='checkbox'
                onChange={handleCheck}
                checked={ifChecked || false}
            />
            <img
                src={'./static/images/videoCover.png'}
                alt='videocover'
                onClick={toVideoPlay}
            />
            <Dropdown
                className='dropdown'
                menu={MenuProps}
            >
                <Space>
                    <EllipsisOutlined />
                </Space>
            </Dropdown>
            <h2 className='video-item-name'>{info.video_name}</h2>
        </div>
    )
}